<#assign base = request.contextPath />
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <base id="base" href="${base}">
    <link href="${base}/css/main.css" rel="stylesheet">
	<link href="${base}/js/jquery/css/jquery-ui.min.css" rel="stylesheet"/>   
    <link href="${base}/js/jquery/css/jquery-ui-timepicker-addon.css" rel="stylesheet"/>
    <script src="${base}/js/jquery/jquery-3.2.1.min.js"></script>
    <script src="${base}/js/jquery/jquery-ui.min.js"></script>
    <script src="${base}/js/jquery/jquery-ui-timepicker-addon.js"></script>
    <script src="${base}/js/jquery/jquery-ui-timepicker-zh-CN.js"></script>
    <script src="${base}/js/echarts.js"></script>
</head>

<body>
	<form name="parkReport">
	   <table>
		    <tr>
		        <td>
		                                停车场名称：
		         </td>
		        <td>
		             <select id="park">
		                 <option value="1">停车场测试数据1</option>
		                 <option value="2">停车场测试数据2</option>
		                 <option value="3">停车场测试数据3</option>
		                 <option value="4">停车场测试数据4</option>
		                 <option value="5">停车场测试数据5</option>
		             </select>
		         </td>
		    </tr>
	       <tr>
	           <td>
	               	开始时间：
	           </td>
	           <td>
				  <input id="staTime" type="text" placeholder="请选择时间" readonly>
	           </td>
	       </tr>
	       <tr>
	       	   <td>
					结束时间：
	           </td>
	           <td>
				  <input id="endTime" type="text" placeholder="请选择时间"  readonly>
	           </td>
	       </tr>
	       <tr>
	           <td colspan="2">
	               <input type="button" value="查询" onclick="queryReport()"></input>
	           </td>
	       </tr>
	   </table>
	
	</form>
	
</br>
</br>
</br>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width:1800px;height:600px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    function queryReport() {
        var parkId = $("#park").val();
        var staTime = $("#staTime").val();
        var endTime = $("#endTime").val();	
        if(staTime > endTime){
        	alert("您选择的开始时间不能大于结束时间");
        	return;
        }
        $.ajax({
            type: "GET",
            url: "${base}/report/getCountParkCarByTime?parkId="+parkId+"&staTime="+staTime+"&endTime="+endTime,
            dataType: "json",
            error: function(XMLHttpRequest, textStatus, errorThrown) {  
            			//#3这个error函数调试时非常有用，如果解析不正确，将会弹出错误框
                        //alert(XMLHttpRequest.status);
                        //alert(XMLHttpRequest.readyState);
                        //alert(textStatus); 
                    },
            success: function (data) {
                if (data.code == 1) {
                    var reportMap = data.data;
                    var xArray = [];
                    var yArray = [];
                    for (var key in reportMap) {
                        xArray.push(key+"点");
                        yArray.push(reportMap[key]);
                    }
                    console.log("---- key ---- " + xArray);

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '每小时进入该停车场车辆统计'
                        },
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            data: ['每小时进入该停车场车辆统计']
                        },
                        xAxis: {
                            data: xArray
                        },
                        yAxis: {},
                        series: [{
                            name: '车辆',
                            type: 'bar',
                            barWidth: '60%',
                            data: yArray
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        });
    }
    
	function outputObj(obj) {  
	    var description = "";  
	    for (var i in obj) {  
	        description += i + " = " + obj[i] + "\n";  
	    }  
	    alert(description);  
	} 
	 $('#staTime').datetimepicker({
	 					language: 'zh-CN',
	 					changeYear: true,
	                    changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                        timeText: '时间',
                        hourText: '小时',
                        minuteText: '分钟',
                        secondText: '秒',
                        currentText: '现在',
                        closeText: '完成',
                        showSecond: false, //显示秒  
                        timeFormat: 'HH:mm' //格式化时间  
                    });
	 $('#endTime').datetimepicker({
	 					language: 'zh-CN',
	 					changeYear: true,
	                    changeMonth: true,
                        dateFormat: "yy-mm-dd",
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                        timeText: '时间',
                        hourText: '小时',
                        minuteText: '分钟',
                        secondText: '秒',
                        currentText: '现在',
                        closeText: '完成',
                        showSecond: false, //显示秒  
                        timeFormat: 'HH:mm' //格式化时间  
                    });
    
</script>

</body>

</html>